<template>
	<view class="choose-main-representative-root">
		<view class="query-container">
			<u-search @search="queryList" placeholder="请输入关键字" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="list-container">
			<u-checkbox-group v-show="Array.isArray(dataList) && dataList.length > 0 && multiple"
				v-model="checkboxValue" placement="column">
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in dataList" :key="index"
					:label="item.representativeName" :name="item.representativeId">
				</u-checkbox>
			</u-checkbox-group>


			<u-radio-group v-show="Array.isArray(dataList) && dataList.length > 0 && !multiple" v-model="checkboxValue"
				placement="column">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in dataList" :key="index"
					:label="item.representativeName" :name="item.representativeId">
				</u-radio>
			</u-radio-group>

			<empty v-show="dataList == null || dataList.length <=0 "></empty>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty/index.vue";
	import {
		getQueryHeaders,
		requestGet
	} from "@/util/means/request";
	import {
		QUERY_REPRESENTATIVES
	} from "@/api/suggestion";

	export default {
		name: "chooseMainRepresentative",
		components: {
			empty
		},
		props: {
			authType: {
				type: String,
			},
			multiple: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				keyword: '',
				dataList: [],
				checkboxValue: null
			}
		},
		methods: {
			queryList() {
				let {
					authType,
					pageNo = 1,
					pageSize = 500,
					representativeName = this.keyword
				} = this
				requestGet({
					url: QUERY_REPRESENTATIVES,
					data: {
						authType,
						pageNo,
						pageSize,
						representativeName
					},
					header: getQueryHeaders()
				}).then(res => {
					this.dataList = res.records.map(item => {
						let {
							representativeName,
							id: representativeId
						} = item;
						return {
							representativeName,
							representativeId
						}
					})
				})
			},
			getCheckedData() {
				const currentVlaues = Array.isArray(this.checkboxValue) ? this.checkboxValue : [this.checkboxValue]
				return this.dataList.filter(item => currentVlaues.some(value => value === item.representativeId))
			}
		},
		created() {},
		mounted() {}
	}
</script>

<style scoped lang="scss">
	.choose-main-representative-root {
		width: 100%;
		height: 700rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.query-container {
			width: 100%;
			height: 100rpx;
			margin-bottom: 20rpx;

			::v-deep .u-search {
				height: 100%;

				.u-search__action {
					display: inline-block;
				}
			}
		}

		.list-container {
			width: 100%;
			height: 580rpx;
			overflow: auto;

			::v-deep .u-checkbox,
			.u-radio {
				padding: 10rpx 0;
				margin-bottom: 0;
			}
		}
	}
</style>